<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">

		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- 社区入口 -->
				<h1 class="title">悦购物</h1>
			</header>
			
			

			<!-- 工具栏 -->
			<nav class="bar bar-tab">	
				<a class="tab-item external" href="../shop_index.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="chat/chat.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="cart/cart.html">
					<span class="icon icon-cart"></span>
					<span class="tab-label">购物车</span>
				</a>
				<a class="tab-item external" href="user/userCenter.html">
					<span class="icon icon-me"></span>
					<span class="tab-label">我的购物</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				
				<!-- 搜索栏 -->
				 <div class="searchbar row">
				   <div class="search-input col-85">
				     <input type="search" v-model="name" id='search' placeholder='输入关键字...'/>
				   </div>
				   <a @click="search" class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
				 </div>



				  <div class="card" v-for="con in cons">
					<!-- 商品名字-- -->
					<a :href="'../shop/display/commodityDetail.html?shopId='+con.data.shopId"><div class="card-header">{{con.data.name}}</div></a>
					<div class="card-content">
					  <div class="list-block media-list">
						<ul>
						  <li class="item-content">
							<div class="item-media">
								<!-- {{con}} -->
								<!-- {{con.data2.thumbnail}} -->
								<!-- <img src="../img/shop/06.jpg" > -->
								<img :src="con.data2.thumbnail" height="50px" >
								<!-- <img src="http://localhost:5555/shop/img/joylife/m5.jpg" > -->
							</div>
							<div class="item-inner">
							  <div class="item-title-row">
								<div class="item-title"></div><br><br>
							  </div>
							  <div class="item-subtitle"><font color="red">¥:{{con.data.price}}</font></div>
							</div>
						  </li>
						</ul>
					  </div>
					</div>
					<div class="card-footer">
					  <span>活动详情</span>
					  <span>24 评论</span>
					</div>
				  </div> 
				  
				  
			</div>
			
			
		</div> <!-- /vue -->	
		

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- VUE的使用 -->
		<script>
			
				//alert(refreshtoken);
			
		        var app = new Vue({
		            el:"#app",
		            data:{
						name:"",
		                cons:[]
		            },
		            methods:{
		               
		               search:function(){ 
							
		                    //ajax for axios
		                    var that=this;
		                    axios.get(serviceIP+"/shop/search?name="+this.name
							,{headers:{"token":token,"refreshtoken":refreshtoken}})
		                    .then(function(d){
								//alert(d.data.data.data)
		                        that.cons=d.data.data;
		                    });
		               }
		            }
		        });
		    
		</script>
		<script type="text/javascript">
			$.init();
		</script>
	</body>
</html>
